<template>
    <div class="detail-container" v-loading="loading">
        <div style="position: absolute;top:200px;right:30%;" v-if="orderInfo.isDelete">
            <img :src="zhoufei" />
        </div>
        <el-card shadow="never" style="margin-top: 15px;" class="detail-form">
            <div style="margin-top:20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">基本信息</span>
            </div>
            <el-form  size="mini" label-width="150px" style="margin-top:20px">

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="单据编号：">{{orderInfo.entrySn}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单据日期：">{{orderInfo.createTime}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单据类型：">{{orderInfo.entryType}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="供应商：">{{orderInfo.supplierName}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合同公司：">{{orderInfo.fromCompany}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合计数量：">{{orderInfo.entryNum}}</el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="合计金额：">{{orderInfo.entryAmount}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系人：">{{orderInfo.contactName}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="运费报销状态：">{{orderInfo.isFreightSettled == 0 ? '未报销' : '已报销'}}</el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="电话：">{{orderInfo.contactPhone}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="运费报销时间：">{{orderInfo.freightSettledTime}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="业务员：">{{orderInfo.userName}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注：">{{orderInfo.entryRemark}}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div style="margin-top: 20px;clear: both">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">商品信息</span>
            </div>
            <el-table
                    ref="orderItemTable"
                    :data="orderInfo.entryGoodsList"
                    style="width: 100%;margin-top: 20px;box-sizing: border-box" border>
                <el-table-column label="商品名称" width="150" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsName}}
                    </template>
                </el-table-column>
                <el-table-column label="商品牌号" width="150" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsSn}}
                    </template>
                </el-table-column>
                <el-table-column label="批号" width="150"  align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsBatchNo }}
                    </template>
                </el-table-column>
              <el-table-column
                align="center"
                label="批次号类型"
                width="100">
                <template slot-scope="scope">
                  {{scope.row.goodsPayMethod}}
                </template>
              </el-table-column>
                <el-table-column label="仓库" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsWarehouse}}
                    </template>
                </el-table-column>
                <el-table-column label="单价" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsPrice}}
                    </template>
                </el-table-column>
                <el-table-column label="数量" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsNum}}
                    </template>
                </el-table-column>
                <el-table-column label="单位" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsUnit}}
                    </template>
                </el-table-column>
                <el-table-column label="金额" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsAmount}}
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="150">
                    <template slot-scope="scope">
                        {{scope.row.goodsRemark}}
                    </template>
                </el-table-column>
                <el-table-column label="交货日期" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsDeliveryDate}}
                    </template>
                </el-table-column>
                <el-table-column label="源单编号" width="100" align="center">
                    <template slot-scope="scope">
                      <el-link @click="toPurchaseContractDetail(scope.row.orderSn)" type="primary" style="font-size:12px">
                        {{scope.row.orderSn}}
                      </el-link>
                    </template>
                </el-table-column>
                <el-table-column label="预计发货地" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsDeliveryCity}}
                    </template>
                </el-table-column>
            </el-table>
            <div style="overflow: hidden;margin-top:40px">
                <div style="clear: both">
                    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                    <span class="font-small">司机信息</span>
                    <el-button size="small" type="text" style="margin-left:20px;" @click="showDetail" v-if="orderInfo.isFreightSettled!=1 && !orderInfo.isDelete">修改司机信息</el-button>
                </div>
                <el-form  size="mini" label-width="150px" style="margin-top:20px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="司机姓名：">{{orderInfo.driverName}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="手机号：">{{orderInfo.driverMobile}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="车牌号：">{{orderInfo.driverCardNo}}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="派单员：">{{orderInfo.assignUser}}</el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item label="备注：">{{orderInfo.driverRemark}}</el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </div>

            <div style="overflow: hidden">
                <div style="margin-top: 40px;clear: both">
                    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                    <span class="font-small">费用信息</span>
                    <el-button size="small" type="text" style="margin-left:20px;" @click="showFeiYongDetail" v-if="orderInfo.isFreightSettled!=1 && !orderInfo.isDelete">修改费用信息</el-button>
                </div>
                <el-form  size="mini" label-width="150px" style="margin-top:20px">
                    <el-col :span="8">
                        <el-form-item label="运费：">{{orderInfo.freight}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="司机运费：">{{orderInfo.driverFreight}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="物流利润：">{{orderInfo.freightProfit}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="承担类型：">{{orderInfo.freightType}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="收款人：">{{orderInfo.payeeUsername}} <span style="padding-left:15px"> {{orderInfo.isHasBill == 1 ? '有票据' : '无票据'}} </span></el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="凭证：">
                            <img :src="item" v-for="item in orderInfo.costVoucher" @click="fullImg(item)" style="width:100px;height:100px;object-fit:contain;cursor: pointer;margin-right:5px"/>
                        </el-form-item>
                    </el-col>
                </el-form>
            </div>
            <div style="margin-top:40px;text-align: center">
                <el-button style="width:150px;" @click="showPrint" type="primary">打印<span style="font-size:12px;">（已打印 {{orderInfo.hasPrintNum}} 次）</span></el-button>
            </div>

            <div style="margin-top: 40px;clear: both">
                <el-menu :default-active="logTab" class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1">操作记录</el-menu-item>
                </el-menu>
            </div>
            <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
                <el-timeline>
                    <el-timeline-item
                            v-for="(activity, index) in orderInfo.entryLogList"
                            :key="index">
                        <span><span style="padding-right:10px;">{{activity.createTime}}</span>{{activity.userName}}：{{activity.logContent}}</span>
                    </el-timeline-item>
                </el-timeline>
                <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderInfo.entryLogList && orderInfo.entryLogList.length == 0">- 暂无数据 -</div>
            </div>
        </el-card>


        <!--编辑司机信息-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="handleClose"
                title="司机信息"
                :visible.sync="dialogVisible"
                width="500px">
            <el-form :model="quitForm" size="mini" label-width="120px" ref="quitForm" :rules="rules" >
                <el-form-item label="司机：" prop="driverName">
                    <el-input v-model="quitForm.driverName" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="司机手机号：" prop="driverMobile">
                    <el-input v-model="quitForm.driverMobile" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="车牌号：" prop="driverCardNo">
                    <el-input v-model="quitForm.driverCardNo" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="备注信息：">
                    <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="quitForm.driverRemark"></el-input>
                </el-form-item>
                <el-form-item label="派单员：" prop="chargeUserId">
                        <el-select v-model="quitForm.chargeUserId" filterable placeholder="请选择" clearable>
                            <el-option
                                    v-for="item in userOptionList"
                                    :key="item.userId"
                                    :label="item.userName"
                                    :value="item.userId">
                            </el-option>
                        </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose">取 消</el-button>
                  <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
            </span>
        </el-dialog>


        <!--编辑费用信息-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="handleClose3"
                title="费用信息"
                :visible.sync="dialogVisible3"
                width="500px">
            <el-form :model="feiYongForm" size="mini" label-width="120px" ref="feiYongForm" :rules="rules3">
                <el-form-item label="运费：" prop="freight">
                    <el-input-number v-model="feiYongForm.freight" controls-position="right"></el-input-number>
                </el-form-item>
                <el-form-item label="司机运费：" prop="driverFreight">
                    <el-input-number v-model="feiYongForm.driverFreight" controls-position="right"></el-input-number>
                </el-form-item>
                <el-form-item label="物流利润：" >
                    {{feiYongForm.freight |　pricefifer(feiYongForm.driverFreight)}}
                </el-form-item>
                <el-form-item label="运费类型：" prop="freightType">
                    <el-select v-model="feiYongForm.freightType">
                        <el-option key="sale" label="销售承担" value="sale"></el-option>
                        <el-option key="purchase" label="采购承担" value="purchase"></el-option>
                        <el-option key="logistics" label="运联承担" value="logistics"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="收款人：" prop="payeeUsername">
                    <el-select v-model="feiYongForm.payeeUsername" filterable placeholder="请选择" clearable>
                        <el-option :value="item.cddValue" :label="item.cddValue" :key="item.cddValue" v-for="item in shouKuanList"></el-option>
                    </el-select>
                    <el-checkbox v-model="feiYongForm.isHasBill">有票据</el-checkbox>
                </el-form-item>
                <el-form-item label="上传凭证：" prop="costVoucher">
                    <div style="width:80px;height:80px;object-fit: contain;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in feiYongForm.costVoucher ">
                        <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
                        <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg2(index)"></i>
                    </div>
                    <el-upload
                            class="avatar-uploader"
                            :data="uploadToken"
                            action="https://upload.qiniup.com"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess2">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose3">取 消</el-button>
                  <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
            </span>
        </el-dialog>

        <!--放大图片-->
        <el-dialog
                :visible.sync="dialogVisible5"
                width="800">
            <img :src="fullSrc" style="width:100%"/>
        </el-dialog>

        <!--打印弹窗-->
        <el-dialog
                title="打印"
                :close-on-click-modal="false"
                :beforeClose="closePrint"
                :visible.sync="dialogVisible4"
                width="900px">
            <div id="print-div">
                <div class="title">{{orderInfo.fromCompanyName}}{{orderInfo.entryType}}</div>
                <div class="paper-top">
                    <el-row>
                        <el-col :span="10"><span>编号：{{orderInfo.entrySn}}</span></el-col>
                        <el-col :span="14"><span>单据日期：{{orderInfo.createTime}}</span></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24"><span>供应商：{{orderInfo.supplierName}}</span></el-col>
                    </el-row>
                </div>
                <div class="good-table" style="margin-top:0;">
                    <table cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                            <th align="center" width="12.5%"><div style="white-space:nowrap;">商品名称</div></th>
                            <th align="center" width="17%"><div style="white-space:nowrap;">规格型号</div></th>
                            <th align="center" width="3%"><div style="white-space:nowrap;">单位</div></th>
                            <th align="center" width="10%"><div style="white-space:nowrap;">数量</div></th>
                            <th align="center" width="10%"><div style="white-space:nowrap;">单价</div></th>
                            <th align="center" width="10%"><div style="white-space:nowrap;">总额</div></th>
                            <th align="center" width="12.5%"><div style="white-space:nowrap;">批号</div></th>
                            <th align="center" width="12.5%"><div style="white-space:nowrap;">仓库</div></th>
                            <th align="center" width="12.5%"><div style="white-space:nowrap;">合同单号</div></th>
                            <th align="center" ><div style="white-space:nowrap;">备注</div></th>
                        </tr>
                        <tr v-for="item in orderInfo.entryGoodsList">
                            <td align="center"><div style="word-break:break-all">{{item.goodsName}}</div></td>
                            <td align="center"><div style="word-break:break-all">{{item.goodsSn}}</div></td>
                            <td align="center" style="white-space:nowrap;width:50px">{{item.goodsUnit}}<div></div></td>
                            <td align="center" style="white-space:nowrap;"><div>{{item.goodsNum}}</div></td>
                            <td align="center" style="white-space:nowrap;"><div>{{item.goodsPrice}}</div></td>
                            <td align="center" style="white-space:nowrap;"><div>{{item.goodsAmount}}</div></td>
                            <td align="center" style="white-space:nowrap;"> <div>{{item.goodsBatchNo}}</div></td>
                            <td align="center"><div style="white-space:nowrap;">{{item.goodsWarehouse}}</div></td>
                            <td align="center"><div style="white-space:nowrap;">{{item.orderSn}}</div></td>
                            <td align="center"><div style="word-break:break-all;min-width:60px">{{item.goodsRemark}}</div></td>
                        </tr>
                        <tr>
                            <td colspan="3" align="center">数量合计</td>
                            <td colspan="7">{{orderInfo.entryNum}}</td>
                        </tr>
                    </table>
                </div>
                <div class="paper-bottom">
                    <el-row style="margin-top:20px">
                        <el-col :span="6"><span>仓库签收</span></el-col>
                        <el-col :span="9" style="text-align: center"><span>业务员：{{orderInfo.userName}}</span></el-col>
                        <el-col :span="9" style="text-align: right"><span>制单：{{orderInfo.createUserName}}</span></el-col>
                    </el-row>
                    <el-row style="margin-top:10px">
                        <el-col :span="24">注：本单白色联为（采购联），红色为（仓库联），蓝色为(财务联),绿单为(存根联)，黄色为(存根联)</el-col>
                    </el-row>
                </div>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button type="primary" size="small" style="width:150px;" @click="printdiv">打印</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import store from '@/store'
    import {getQiniuToken,getCustomerSetting,deliverDeliverSet,deliverDeliverList,getOrderUsersList,entryDetail,setEntryDriver,setExpress,warehouseUpdatePrintNum} from '@/api/partner'
    import {validateCommission} from '@/utils/validate';
    import "@/utils/jQuery.print"
    import zhoufei from '@/assets/images/zhuofei.png'
    const defaultSendForm={
        deliverId: '',
        goodsReceipt: [],
        goodsReceiptRemark: '',
        goodsReceiptDate:'',
        goodsReceiptSrc:'',
    };
    const defaultSendTypeForm={
        sendType: '',
    };
    export default {
        name: "customerDetail",
        data(){
            const isvalidateCommission = (rule, value, callback) => {
                if (!validateCommission(parseFloat(value))) {
                    callback(new Error('非负整数或小数'))
                } else if(value > 99999999){
                    callback(new Error('最大值为99999999'))
                }else {
                    callback()
                }
            };
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                deliverId:this.$route.query.id,
                type:this.$route.query.type,
                orderInfo:{},
                dialogVisible:false,
                btnLoading:false,
                quitForm:{
                    entryId:'',
                    driverName:'',
                    driverMobile:'',
                    driverCardNo:'',
                    chargeUserId:'',
                    driverRemark:''
                },
                rules:{
                    driverName:[{required: true, trigger: 'blur' ,message: '请输入司机姓名',}],
                    driverMobile:[{required: true, trigger: 'blur' ,message: '请输入司机手机号',}],
                    driverCardNo:[{required: true, trigger: 'blur',message: '请输入司机车牌号',}],
                    chargeUserId:[{required: true, trigger: 'change',message: '请选择司机负责人',}],
                },

                dialogVisible2:false,
                btnLoading2:false,
                imgs:[],
                uploadToken:{
                    token:'',
                },
                imgDomain:'',
                dialogVisible3:false,
                btnLoading3:false,
                dialogVisible5:false,
                fullSrc:'',
                logTab:'1',
                orderLogs:[],
                feiYongForm:{
                    entryId:'',
                    freight:'',
                    driverFreight:'',
                    freightType:'',
                    costVoucher:[],
                    payeeUsername:'',
                    isHasBill:false
                },
                driverList:[],
                rules3:{
                    freight:[{required: true, trigger: 'blur' ,validator:isvalidateCommission,}],
                    driverFreight:[{required: true, trigger: 'blur' ,validator:isvalidateCommission,}],
                    payeeUsername:[{required: true, trigger: 'change' ,message:'请选择收款人'}],
                    freightType:[{required: true, trigger: 'change' ,message:'请选择运费类型'}],
                },
                userOptionList:[],
                zhoufei:zhoufei,
                shouKuanList:[],
                dialogVisible6:false,
                btnLoading6:false,
                dialogVisible4:false,

            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {
            this.getPageInfo();
            this.getUploadToken();
            this.getUserOptionList();
            this.getCustomerSettingList();
        },
        filters: {
            pricefifer(val1,val2){
                return (parseFloat(val1) - parseFloat(val2)).toFixed(2)
            },
        },
        methods:{
          //去采购详情页
            toPurchaseContractDetail(orderSn){
            let routeData = this.$router.resolve({name:'purchaseContractDetail',query:{id:orderSn}});
            window.open(routeData.href);
          },
            //显示打印弹窗
            showPrint(){
                this.dialogVisible4 = true;
            },
            //关闭打印弹窗
            closePrint(){
                this.dialogVisible4 = false;
                this.getPageInfo()
            },

            //打印
            printdiv(){
                warehouseUpdatePrintNum({entryId:this.$route.query.id});
                $("#print-div").print({
                    globalStyles:true,//是否包含父文档的样式，默认为true
                    mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                    stylesheet:null,//外部样式表的URL地址，默认为null
                    noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
                    iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                    append:null,//将内容添加到打印内容的后面
                    prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
                    deferred: $.Deferred()//回调函数
                });
            },
            //获取客户配置
            getCustomerSettingList(){
                getCustomerSetting().then((res)=>{
                    res.forEach((el)=>{
                        if(el.cdtCode == 'payee_type'){
                            this.shouKuanList = el.data
                        }
                    });
                })
            },
            //获取员工下拉选项
            getUserOptionList(){
                getOrderUsersList({type:'物流'}).then((res)=>{
                    this.userOptionList = res;
                })
            },
            //获取发货单司机列表
            getDriverList(){
                deliverDeliverList({deliverId:this.deliverId}).then((res)=>{
                    this.driverList = res;
                })
            },
            //放大图片
            fullImg(item){
                this.dialogVisible5 = true;
                this.fullSrc = item
            },


            //获取七牛TOKEN
            getUploadToken(){
                getQiniuToken().then((res)=>{
                    this.uploadToken.token = res.token;
                    this.imgDomain = res.domain
                })
            },


            //上传图片
            handleAvatarSuccess2(res){
                this.feiYongForm.costVoucher.push(this.imgDomain+res.key);
            },

            //删除图片
            delImg2(index){
                this.feiYongForm.costVoucher.splice(index,1)
            },

            //编辑司机信息
            showDetail(){
                this.dialogVisible = true;
                this.quitForm.driverName = this.orderInfo.driverName;
                this.quitForm.driverMobile = this.orderInfo.driverMobile;
                this.quitForm.driverCardNo = this.orderInfo.driverCardNo;
                this.quitForm.driverRemark = this.orderInfo.driverRemark;
                this.quitForm.chargeUserId = this.orderInfo.assignUserId && this.orderInfo.assignUserId != '' ? this.orderInfo.assignUserId :this.userId;
            },

            //关闭司机信息
            handleClose(){
                this.dialogVisible = false;
                this.$refs.quitForm.clearValidate();
            },

            //提交编辑司机信息
            handleConfirm(){
                this.$refs.quitForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        let data = {};
                        data.entryId = this.$route.query.id;
                        data.driverName = this.quitForm.driverName;
                        data.driverMobile = this.quitForm.driverMobile;
                        data.driverCardNo = this.quitForm.driverCardNo;
                        data.chargeUserId = this.quitForm.chargeUserId;
                        data.driverRemark = this.quitForm.driverRemark;
                        setEntryDriver(data).then(()=>{
                            this.btnLoading = false;
                            this.handleClose();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading = false;
                        })
                    }
                })
            },

            //显示费用信息
            showFeiYongDetail(){
                this.dialogVisible3 = true;
                this.feiYongForm.freight = this.orderInfo.freight;
                this.feiYongForm.driverFreight = this.orderInfo.driverFreight;
                this.feiYongForm.freightType = this.orderInfo.freightType;
                this.feiYongForm.costVoucher = JSON.parse(JSON.stringify(this.orderInfo.costVoucher));
                this.feiYongForm.payeeUsername = this.orderInfo.payeeUsername;
                this.feiYongForm.isHasBill = this.orderInfo.feiYongForm==1 ? true : false
            },
            //关闭费用信息
            handleClose3(){
                this.dialogVisible3 = false;
                this.$refs.feiYongForm.clearValidate();
            },

            //提交编辑费用信息
            handleConfirm3(){
                this.$refs.feiYongForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading3 = true;
                        let data = {};
                        data.entryId = this.$route.query.id;
                        data.freight = this.feiYongForm.freight;
                        data.driverFreight = this.feiYongForm.driverFreight;
                        data.costVoucher = this.feiYongForm.costVoucher.join(",");
                        data.payeeUsername = this.feiYongForm.payeeUsername;
                        data.freightType = this.feiYongForm.freightType;
                        data.isHasBill = this.feiYongForm.isHasBill ? 1 : 0;
                        setExpress(data).then(()=>{
                            this.btnLoading3 = false;
                            this.handleClose3();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading3 = false;
                        })
                    }
                })
            },

            goBlack(){
                this.$router.go(-1)
            },

            //获取合同详情
            getPageInfo(){
                this.loading = true;
                entryDetail({entryId:this.$route.query.id}).then(res=>{
                    this.orderInfo = res;
                    if(this.orderInfo.costVoucher != ''){
                        this.orderInfo.costVoucher = this.orderInfo.costVoucher.split(",")
                    }else{
                        this.orderInfo.costVoucher = [];
                    }

                    this.loading = false;
                });
            },

        }
    }
</script>

<style  lang="scss" scoped>
    .avatar-uploader{
        margin-bottom:10px;
        display: inline-block;
        width:80px;
        height:80px;
        border:1px solid #DCDFE6;
        text-align: center;
        line-height: 80px;
    }
    .detail-form{
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
            margin-bottom:0px;
        }
    }

    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
        .el-card__header{
            background: #f8f8f8;
            .kehu-name{
                display: inline-block;
                font-size:14px;
                vertical-align: middle;
            }
            .kehu-label{
                font-size:12px;
                vertical-align: middle;
                display: inline-block;
                margin-left:15px;
                color: #409eff;
                background: #ecf5ff;
                border: 1px solid #b3d8ff;
                height:24px;
                line-height: 24px;
                padding:0 10px;
                border-radius: 5px;
            }
            .kehu-info{
                text-align: right;
                font-size: 12px;
                color:#333;
                line-height: 20px;
                span{
                    padding-left:16px;
                }
            }
        }
        .operate-container {
            background: #F2F6FC;
            height: 80px;
            margin: -20px -20px 0;
            line-height: 80px;
        }
    }
    .price-block{
        font-size:12px;
        line-height:30px;
        .lab{
            display: inline-block;
            width:100px;
            text-align: right;
        }
        .text{
            display: inline-block;
        }
    }
    #print-div{
        font-size:14px;
        font-family: "Microsoft YaHei";
        color:#000;
        width:100%;
        margin:0 auto;
        .title{
            font-size:28px;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
        }
        .paper-top{
            margin-top:20px;
            line-height: 20px;
        }
        .good-table{
            width:100%;
            margin-top:0px;
            table{
                border-left:1px solid #000;
                border-bottom:1px solid #000;
                td,th{
                    font-weight: normal;
                    border-right:1px solid #000;
                    border-top:1px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                }
            }
        }
        .paper-bottom{
            margin-top:0px;
            line-height: 20px;
        }
    }
</style>
